<template>
    <div id="author_relation" style="width: 100%;height: 100%;"></div>
</template>

<script setup lang='ts'>
import * as echarts from 'echarts'
import { onMounted, reactive, getCurrentInstance, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useMessage } from 'naive-ui';

type EChartsOption = echarts.EChartsOption;

// 引入路由
const router = useRouter()

// 引入消息函数
const message = useMessage()

// api访问代理
const { proxy } = getCurrentInstance() as any

const props = defineProps([
    'pid'
])

onMounted(() => {
    initCharts()
})

let graph = ref({
    "nodes": [],
    "links": [],
    "categories": []
})

let option: EChartsOption = reactive({
    title: {
        text: 'Scholar relations',
        subtext: '',
        top: 'top',
        left: 'left'
    },
    tooltip: {},
    legend: [
        {
            data: graph.value.categories.map(function (a: any) {
                return a.name;
            })
        }
    ],
    animationDuration: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [
        {
            type: 'graph',
            layout: 'none',
            data: graph.value.nodes,
            links: graph.value.links,
            categories: graph.value.categories,
            roam: true,
            label: {
                position: 'right',
                formatter: '{b}'
            },
            lineStyle: {
                color: 'source',
                curveness: 0.3
            },
            emphasis: {
                focus: 'adjacency',
                lineStyle: {
                    width: 10
                }
            }
        }
    ]
});



const initCharts = (() => {

    var chartDom = document.getElementById("author_relation")!;
    var myChart = echarts.init(chartDom);
    myChart.showLoading();
    proxy.$api.entity.getAuthorRelations({ id: router.currentRoute.value.params.id }).then((result: any) => {
        myChart.hideLoading();
        if (result.success) {
            graph.value = result.graph;

            if(graph.value.nodes.length<30){
                graph.value.nodes.forEach(function (node: any) {
                    node.label = {
                        show: node.value >= 1
                    };
                });
            }
            else{
                graph.value.nodes.forEach(function (node: any) {
                    node.label = {
                        show: node.value >= 2
                    };
                });
            }
            
            (option.series as any)[0].data = graph.value.nodes;
            (option.series as any)[0].links = graph.value.links;
            (option.series as any)[0].categories = graph.value.categories;
            console.log((option.series as any)[0].graph);
            option && myChart.setOption(option);
        } else {
            message.warning(result.msg)
        }
    }).catch(() => {
        message.error('未知错误')
    });

    graph.value.nodes.forEach(function (node: any) {
        node.label = {
            show: node.symbolSize > 1
        };
    });

    option && myChart.setOption(option);
    myChart.on('click', (param) => {
        if ((param.data as any).id !== "" && (param.data as any).id !== "-1") {
            let router_data = router.resolve({ name: 'Author', params: { id: (param.data as any).id } })
            window.open(router_data.href, '_blank')
        }
    })
})
</script>

<style scoped>
</style>